<template>
  <!--  -->
  <div class="main">
    <div class="content table">
      <ttTable
        ref="ttTableCtx"
        :tableHeader="tableHeader"
        :tableData="tableData"
      ></ttTable>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";

import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

onMounted(() => {
  initTableHeader();
  // $global.$post("/users/list").then((res) => {
  //   console.log(res.data);
  // });
  // $global
  //   .$post("/users/add", {
  //     name: "ytt",
  //   })
  //   .then((res) => {
  //     console.log(res);
  //   });
});

let tableHeader = $ref([]);
function initTableHeader() {
  tableHeader.push(
    {
      title: "游戏名(备注)",
      key: "name",
      width: "200",
      fixed: "left",
      type: "input",
    },
    {
      title: "总计活跃",
      key: "name",
      width: "120",
    }
  );

  for (let i = 1; i < 10; i++) {
    let obj = {
      title: `第${i}周`,
      key: `week${i}`,
      width: "150",
    };

    if (i == 1) {
      obj.children = [
        {
          title: `活跃`,
          key: `week${i}`,
          width: "120",
        },
      ];
    } else {
      obj.children = [
        {
          title: `活跃`,
          key: `week${i}`,
          width: "120",
        },
        {
          title: `较上周`,
          key: `week${i}`,
          width: "120",
        },
      ];
    }

    tableHeader.push(obj);
  }

  tableHeader.push({
    title: "操作",
    key: "name",
    type: "btns",
    width: "180px",
    fixed: "right",
    btns: [
      {
        name: "编辑",
        bgc: "green",
      },
      {
        name: "详情",
      },
      {
        name: "删除",
        bgc: "red",
      },
    ],
  });
}

let tableData = [
  {
    name: "123",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
  {
    name: "321",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
  {
    name: "1",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
  {
    name: "2",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
  {
    name: "23",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
];
</script>
<style lang="scss" scoped>
.table {
  flex: 1;
  overflow: hidden;
}
</style>
